<template>
    <div>
        <yw-header></yw-header>
        <div class="accompanyPlay-layout">
            <div class="main-b">
                <div class="accompanyPlay-filtrate-A" v-for="(item,index) in gameService" :key="index">
                    <div v-if="gameService[index].listService.length > 0">
                    <div class="accompanyPlay-filtrate-A-name">
                        {{item.name}}
                    </div>
                    <ul v-if="id">
                        <li v-for="(itemEr,indexEr) in item.listService" :key="indexEr" @click="id = itemEr.serviceId,getServiceInfo(itemEr.serviceId)">
                            <a :class="[itemEr.serviceId == id ? 'active' : '']">
                                <img :src="$imgPath(itemEr.serviceLogo)">
                                <label>{{itemEr.serviceName}}</label>
                            </a>
                        </li>
                    </ul>
                    <ul v-else>
                        <li v-for="(itemEr,indexEr) in item.listService" :key="indexEr" @click="id = itemEr.serviceId,getServiceInfo(itemEr.serviceId),dwIndex = -1,sex = '',tagId = '',tagIndex = -1">
                            <a :class="[itemEr.serviceId == serviceId ? 'active' : '']">
                                <img :src="$imgPath(itemEr.serviceLogo)">
                                <label>{{itemEr.serviceName}}</label>
                            </a>
                        </li>
                    </ul>
                    </div>
                </div>

                <div class="accompanyPlay-filtrate-B" v-if="dwList.length > 0">
                    <div class="accompanyPlay-filtrate-B-name">
                        选择等级
                    </div>
                    <ul>
                        <li @click="dwIndex = -1,divisionIds = '',listByServiceUser()"><a :class="[dwIndex == -1 ? 'active' : '']">全部</a></li>
                        <li v-for="(item,index) in dwList" :key="index" @click="dwIndex = index,divisionIds = item.id,listByServiceUser()"><a :class="[index == dwIndex ? 'active' : '']">{{item.name}}</a></li>
                    </ul>
                </div>

                <div class="accompanyPlay-filtrate-B">
                    <div class="accompanyPlay-filtrate-B-name">
                        陪玩性别
                    </div>
                    <ul>
                        <li @click="sex = '',listByServiceUser()"><a :class="[sex == '' ? 'active' : '']">全部</a></li>
                        <li @click="sex = 1,listByServiceUser()"><a :class="[sex == 1 ? 'active' : '']">小哥哥</a></li>
                        <li @click="sex = 2,listByServiceUser()"><a :class="[sex == 2 ? 'active' : '']">小姐姐</a></li>
                    </ul>
                </div>

                <div class="accompanyPlay-filtrate-B">
                    <div class="accompanyPlay-filtrate-B-name biaoqianClass" style="height:180px;line-height:180px;">
                        个性标签
                    </div>
                    <ul>
                        <li><a :class="[tagIndex == -1 ? 'active' : '']" @click="tagId = '',tagIndex = -1,listByServiceUser()">全部</a></li>
                        <li v-for="(item,index) in biaoqian" :key="index" @click="tagId = item.id,tagIndex=index,listByServiceUser()"><a :class="[tagIndex == index ? 'active' : '']">{{item.name}}</a></li>
                    </ul>
                </div>
            </div>
            <div class="main">
                <div class="accompanyPlay-Sort">
                    <a :class="[sort == '' ? 'active' : '']" @click="sort = '',listByServiceUser()">智能排序</a>
                    <a :class="[sort == 'userCredit,DESC' ? 'active' : '']" @click="sort = 'userCredit,DESC',listByServiceUser()">按人气</a>
                    <a :class="[sort == 'price,ASC' ? 'active' : '']" @click="sort = 'price,ASC',listByServiceUser()">按价格</a>
                    <a :class="[sort == 'price,DESC' ? 'active' : '']" @click="sort = 'price,DESC',listByServiceUser()">按评价</a>
                    <a :class="[sort == 'qualityTime,DESC' ? 'active' : '']" @click="sort = 'qualityTime,DESC',listByServiceUser()">新人秀<i class="accompanyPlay-new"></i></a>
                </div>
            </div>
            <list :list="list" :serviceId="serviceId"></list>
        </div>
        <yw-footer></yw-footer>
    </div>
</template>
<script>
import apiHttp from '../api/index.js'
import list from './playChild/list'
import header from './common/header'
import footer from './common/footer'
export default {
    data(){
        return{
            gameService:[],         // 服务列表
            dwList:[],              //  等级列表
            gameServiceIndex:'00',      // 选择的服务
            biaoqian:[],             //  个性标签
            serviceId:'',             //   选择游戏的id
            sex:'',                     // 选择男女
            divisionIds:'',             // 选择等级
            list:[],                    // 内容
            dwIndex: -1,                // 段位选择
            sort: '',                // 排序选择
            id:this.$route.query.id,    // 服务Id
            tagId:'',                   // 个性标签
            tagIndex:-1,                // 个性标签选择
        }
    },
    components:{
        'yw-header':header,
        'yw-footer':footer,
        list
    },
    mounted(){
        this.gameServiceList()
        this.listByGroupCode()
    },
    methods:{
        // 游戏服务
        gameServiceList(){
            apiHttp.apiIndex.listByGroup('',resp=>{
                if(resp.code == 200){
                    for(let i = 0; i < resp.data.length; i++){
                        if(resp.data[i].listService.length > 0){
                            for(let j = 0; j < resp.data[i].listService.length; j++){
                                resp.data[i].listService[j].num = i.toString() + j.toString()
                            }
                            this.gameService.push(resp.data[i])
                        }
                    }
                    this.getServiceInfo(this.gameService[0].listService[0].serviceId)
                    
                    if(this.id == undefined || this.id == '' || this.id == null){
                        this.serviceId = this.gameService[0].listService[0].serviceId
                    }else{
                        this.serviceId = this.id
                    }
                    console.log(this.serviceId)
                    this.listByServiceUser()
                }
            })
        },
        // 游戏等级
        getServiceInfo(serviceId){
            this.serviceId = serviceId
            apiHttp.apiIndex.getServiceInfo(serviceId,'',resp=>{
                if(resp.code == 200){
                    for(let i = 0; i < resp.data.attributeFirst.length; i++){
                        if(resp.data.attributeFirst[i].code == 'division'){
                            this.dwList = resp.data.attributeFirst[i].attributeSecond
                        }
                    }
                    this.listByServiceUser()
                }
            })
        },
        // 个性标签
        listByGroupCode(){
            apiHttp.apiDetail.listByUseCount('',resp=>{
                this.biaoqian = resp.data
            })
        },
        // 筛选
        listByServiceUser(){
            let parmes = {
                serviceId:this.serviceId,
                sex:this.sex,
                divisionIds:this.divisionIds,
                sort:this.sort,
                tagId:this.tagId
            }
            apiHttp.apiIndex.listByServiceUser(parmes,resp=>{
                if(resp.code == 200){
                    this.list = resp.data.content
                }
            })
        }
    }
}
</script>
<style scoped>
.biaoqianClass{
    height: 180px;
}
</style>


